import React, { Component } from "react";
import { NavBar, WingBlank, Button, Flex, Toast } from "antd-mobile";
import { withRouter } from "react-router-dom";
import { post } from "../../../../utils/Axios";
import "./index.scss";
class Login extends Component {
  state = {
    username: "",
    password: "",
  };

  submitForm = async () => {
    const { username, password } = this.state;
    if (username === "") {
      Toast.info("亲亲~请输入账号", 3);
      return;
    }

    if (password === "") {
      Toast.info("亲亲~请输入密码", 3);
      return;
    }

    const data = await post("/user/login", {
      username,
      password,
    });

    if (data.status === 200) {
      Toast.info("登录成功", 2);
      localStorage.setItem("xyzf_user_token", data.body.token);

      setTimeout(() => {
        if (this.props.location.state) {
          // console.log(this.props.location.state.from.pathname);
          this.props.history.replace(this.props.location.state.from.pathname);
        } else {
          this.props.history.go(-1);
        }
      }, 2);
    } else if (data.status === 400) {
      Toast.info("账号或密码输入错误", 3);
    } else {
      Toast.info("数据异常", 3);
    }
  };
  render() {
    const { username, password } = this.state;
    return (
      <div className="loginWrapper">
        <NavBar
          mode="dark"
          icon={
            <span
              className="iconfont icon-cuohao"
              onClick={() => {
                this.props.history.go(-1);
              }}
            ></span>
          }
        ></NavBar>
        <WingBlank>
          <div className="title">
            <div className="big">登陆后更精彩</div>
            <div className="small">满足每一个友人对家的幻想</div>
          </div>
          <div className="form">
            <div className="username">
              <input
                type="text"
                value={username}
                placeholder="请输入账号"
                onChange={(event) => {
                  this.setState({
                    username: event.target.value,
                  });
                }}
              />
              <div></div>
            </div>
            <div className="password">
              <input
                type="password"
                value={password}
                placeholder="请输入密码"
                onChange={(event) => {
                  this.setState({
                    password: event.target.value,
                  });
                }}
              />
            </div>
          </div>
          <Button
            type="primary"
            style={{ backgroundColor: "#2ecc71" }}
            activeStyle={{ backgroundColor: "#27ae60" }}
            onClick={() => {
              this.submitForm();
            }}
          >
            登录
          </Button>
          <Flex justify="between">
            <div
              className="register"
              onClick={() => {
                this.props.changLoginOrRegister(false);
              }}
            >
              注册账户
            </div>
            <div className="forgetPassword">忘记密码</div>
          </Flex>
        </WingBlank>
      </div>
    );
  }
}

export default withRouter(Login);
